<!-- pages/NewsTaBar/video/video.vue -->
<template>
  <view class="video-page">
    <!-- 顶部标签栏（复用你项目的tabBanner组件，保持风格统一） -->
    <tabBanner 
      :list="topTabs" 
      @onTabClick="onTabClick" 
      :current="activeIndex" 
      activeColor="#000" 
      activesize="46rpx" 
      fontsize="40rpx" 
      span="30rpx" 
    />

    <!-- 占位符：抵消tabBanner的固定定位高度 -->
    <view class="tab-placeholder"></view>

    <!-- 视频列表：循环渲染视频项 -->
    <view class="video-list">
      <VideoItem v-for="(video, index) in videoList" :key="index" :videoObj="video" />
    </view>
  </view>
</template>

<script>
// 引入组件（路径适配你的项目目录）
import tabBanner from '../../../components/tabBanner.vue'
import VideoItem from '../../../components/videoItemView.vue'

export default {
  components: {
    tabBanner,
    VideoItem
  },
  data() {
    return {
      topTabs: ["搞笑", "娱乐", "财经", "生活", "科技", "军事", "体育", "健康", "国际"],
      activeIndex: 0,
      // 模拟视频数据（可根据实际接口替换）
      videoList: [
        {
          id: "v001",
          title: "曼联阿森纳27次客场不败，英超最强客场王诞生",
          cover: "/static/images/news/t.png",
          playCount: "5.3万次播放",
          author: "体育大事件"
        },
        {
          id: "v002",
          title: "大兴安岭出现超大型野兽，体重一吨比轿车还大",
          cover: "/static/images/news/a.png",
          playCount: "8.7万次播放",
          author: "动物大观察"
        },
        {
          id: "v003",
          title: "大自然的魅力！雨后山林云雾缭绕如仙境",
          cover: "/static/images/news/b.png",
          playCount: "12.1万次播放",
          author: "户外探险记"
        },
        {
          id: "v004",
          title: "网红司机为救婴儿连闯3红灯，警察查实后取消处罚",
          cover: "/static/images/news/c.png",
          playCount: "14.9万次播放",
          author: "社会正能量"
        }
      ]
    }
  },
  methods: {
    onTabClick(index) {
      console.log("点击了标签：" + this.topTabs[index]);
      this.activeIndex = index;
      // 这里可添加标签切换时的视频数据刷新逻辑
    }
  }
}
</script>

<style scoped>
.video-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}
/* 抵消tabBanner固定定位的高度（与tabBanner高度一致） */
.tab-placeholder {
  height: 80rpx;
}
.video-list {
  width: 100%;
  box-sizing: border-box;
}
/* 兼容tabBanner组件样式 */
::v-deep .tab {
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}
</style>